<template>
    <div id="init_form" style="margin: 0 auto; max-width: 400px; text-align: center;">
        <h4>系统初始化</h4>
        <el-form ref="form" :model="form" label-width="100px" style="max-width:800px">
            <el-form-item label="初始化帐号">
                <el-input v-model="form.uid" placeholder="输入您登录使用的帐号"></el-input>
            </el-form-item>
            <el-form-item label="登录密码">
                <el-input v-model="form.pwd" placeholder="输入登录密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码">
                <el-input v-model="form.pwd2" placeholder="输入确认密码"></el-input>
            </el-form-item>
            <el-form-item label="波特率">
                <el-select v-model="form.baudrate" placeholder="请选择通信波特率">
                    <el-option label="4800" value="4800"></el-option>
                    <el-option label="9600" value="9600"></el-option>
                    <el-option label="14400" value="14400"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">立即初始化</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
    created() {
        // 发起网络请求，检查是否初始化过了。
        // 如果已经初始化过了，则重定向到登录界面
        // 没初始化过，就停留在本界面
    },
    data() {
        return {
            form: {
                uid: "admin",
                pwd: "",
                pwd2: "",
                baudrate: 9600,
            }
        }
    },
    methods: {
        onSubmit() {
            let vm = this
            if (vm.form.pwd != vm.form.pwd2) {
                vm.msgboxEx("密码不一致", 'error')
                return
            }
            vm.ajaxPost('/api/init_sys', {
                uid: vm.form.uid,
                pwd: vm.form.pwd,
                baudrate: vm.form.baudrate,
            }, function(response) {
                if (response.status == 200) {
                    if (response.data.code == 1) {
                        vm.msgboxEx('初始化成功', 'success') //vm.reload_data()
                        vm.$router.push('/login')
                    } else {
                        vm.msgboxEx('初始化失败', 'error')
                    }
                }
            }, function(error) {
                console.log(error);
            })
        }
    }
}
</script>
<style>
* {
    font-size: 13px;
}

#init_form .form-group {
    border: 1px solid #D9D9D9;
    width: 400px;
    margin: 0 auto;
    padding: 10px
}

#init_form .input-group {
    width: 100%;
    padding: 5px 0
}

#init_form .input-label {
    display: inline-block;
    height: 35px;
    line-height: 35px;
    padding: 0 5px;
    width: 10%;
    float: left
}

#init_form .input-group input {
    width: 85%;
    height: 35px;
    border: 1px solid #D9D9D9;
    border-radius: 2px;
    background: none;
    text-indent: 15px;
}

#init_form .button-group button {
    background: none;
    border: 1px solid #D9D9D9;
    min-width: 80px;
    min-height: 30px;
}

#init_form .button-group .min-button {}

#init_form .box-shadow {
    box-shadow: 3px 4px 5px 2px #D9D9D9, 1px 1px 10px 2px #D9D9D9;
    border: 1px solid #D9D9D9
}

#init_form .button-span {
    float: right;
    height: 30px;
    line-height: 30px;
}
</style>
